<template>
  <a-modal
    title="请选择登录小程序"
    v-model:visible="openModal"
    :mask-closable="false"
    unmount-on-close
    @cancel="closeModal"
    title-align="start"
    width="800px"
  >
    <a-table
      :loading="loading"
      :columns="columns"
      :data="dataList"
      :row-selection="rowSelection"
      v-model:selected-keys="ids"
      row-key="smallId"
      :pagination="{
        total: total,
        current: queryParams.pageNum,
        pageSize: queryParams.pageSize,
      }"
      @page-change="tablePageChange"
      @row-click="
        (row) => {
          ids = [row.smallId];
        }
      "
    >
      <template #createTime="{ record }">
        <span>{{ parseTime(record.createTime, '{y}-{m}-{d}') }}</span>
      </template>
    </a-table>
    <template #footer>
      <a-row justify="center">
        <a-button
          type="primary"
          @click="changeApp"
          :loading="okLoading"
          :disabled="ids.length !== 1"
          >切换小程序</a-button
        >
      </a-row>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { selectUserHaveSmall } from '@/api/login';
  import useUserStore from '@/store/modules/user/index';
  import {
    ref,
    reactive,
    computed,
    watch,
    defineProps,
    defineEmits,
  } from 'vue';
  const userStore = useUserStore();
  const props = defineProps({
    open: {
      type: Boolean,
      default: false,
    },
  });

  const rowSelection = reactive({
    type: 'radio',
  });

  const openModal = computed(() => {
    return props.open;
  });

  const loading = ref(false);
  const okLoading = ref(false);
  const ids = ref([]);

  const total = ref(0);
  const queryParams = ref({
    pageNum: 1,
    pageSize: 5,
  });

  const emits = defineEmits(['changeApp', 'update:open']);

  const columns = ref([
    {
      title: '小程序AppID',
      dataIndex: 'appId',
    },
    {
      title: '小程序名称',
      dataIndex: 'smallName',
    },
  ]);
  const dataList = ref([]);

  watch(
    () => props.open,
    (newVal) => {
      if (newVal) {
        ids.value = [userStore.userInfo.smallId];
        handleQuery();
      }
    }
  );

  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }

  function getList() {
    loading.value = true;
    selectUserHaveSmall({}).then((response) => {
      console.log(response);
      dataList.value = response.data.result.map((i) => {
        return {
          smallId: i.menuId,
          appId: i.appId,
          smallName: i.menuName,
          type: i.type,
        };
      });
      // total.value = response.total
      loading.value = false;
    });
  }

  // 分页变化
  function tablePageChange(pageNum) {
    queryParams.value.pageNum = pageNum;
    getList();
  }

  function closeModal() {
    emits('update:open', false);
  }

  function changeApp() {
    okLoading.value = true;
    const id = ids.value[0];
    const item = dataList.value.find((i: any) => i.smallId == id);
    emits('changeApp', {
      isMultipleSmall: dataList.value.length >= 2,
      ...item,
    });
    // emits('changeApp', ids.value[0]);
    emits('update:open', false);
  }
</script>

<style lang="scss" scoped></style>
